<template>
	<view class="document" style="width: 95%;">
		<el-dialog custom-style="width: 95%;height: 95vh;" ref="popup" mode="center" @close="close"
			@opened="$refs.dialogVisible.loadFileList(null)" custom-class="file-viewer" :title="title"
			:visible.sync="dialogVisible" :width="isPc? '70%':'99%'">
			<span slot="title" class="dialog-title">
				<view style="display: flex;justify-content: flex-start;">
					<el-button size="small" v-if="reitem[0]&&reitem[0].url" @click="confirm">确 认</el-button>
					<uv-text v-else :text="title"></uv-text>
				</view>
			</span>
			<document :reset="dialogVisible" :uploadText="uploadText" :maxCount="maxCount" ref="dialogVisible"
				:accept="accept" @selected="selected"></document>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" @click="dialogVisible = false">取 消</el-button>
				<el-button size="small" v-if="reitem[0]&&reitem[0].url" @click="confirm">确 认</el-button>
			</span>
		</el-dialog>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	// 引入
	import tabbars from '@/components/tabbar/tabbar.vue';
	import document from '@/components/folder/document.vue';
	import {
		index,
		task,
		api,
		apiId,
		getScroll,
		scroll,
		delScroll,
	} from '@/common/api.js';
	import config from '@/common/config'
	export default {
		components: {
			// 注册组件
			tabbars,
			document
		},
		model: {
			prop: 'value', // 对应 props 的属性名
			event: 'input' // 触发事件名
		},
		props: {
			value: [Object, Array, String],
			type: {
				type: String,
				default: '上传'
			},
			title: {
				type: String,
				default: '上传'
			},
			uploadText: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			icon: {
				type: String,
				default: 'attach'
			},
			size: {
				type: String,
				default: '28'
			},
			accept: {
				type: String,
				default: '',
			},
			maxCount: {
				type: [Number, String],
				default: 1,
			},
			mode: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				tabbar: config.tabbar,
				dialogVisible: false,
				reitem: {},
				newArr: [],
			}
		},
		// watch: {
		// 	// 监听data数据的变化
		// 	value(newVal, oldVal) {
		// 		console.log(newVal);
		// 	},
		// },
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		methods: {
			confirm() {
				this.$emit('input', this.newArr);
				this.$emit('resdata', this.newArr);
				this.dialogVisible = false;
			},
			close() {
				this.reitem = {};
				this.$refs.dialogVisible.clear()
			},
			visible() {
				this.dialogVisible = true;
			},
			selected(e) {
				this.reitem = e;
				// console.log(e);
				this.newArr = e.filter(item => item.kind !== 'Folder');
				// if()
				// this.$emit('input', this.newArr); // 触发事件更新父组件变量
			},

			replacd(e) {
				if (!e[0] || !e) return [];
				return e.map(function(item) {
					return item.replaceAll('http://localhost:8080', 'https://www.readend.com').replaceAll(
						'https://localhost:8080', 'https://www.readend.com');
					// console.log(item);
				})
			},
			routed(url) {
				uni.$uv.route({
					url: url,
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.document {

		// width: calc(100% - 20px);
		// padding: 10px;
		::v-deep .el-dialog__body {
			padding-top: 0px;
			padding-bottom: 0px;
		}

		.noClick {
			// pointer-events: none;
			cursor: not-allowed;
		}

		/* 自定义弹窗样式 */
		::v-deep(.custom-dialog) {
			border-radius: 10px;
			background-color: #f9f9f9;
		}

		::v-deep(.custom-dialog .el-dialog__header) {
			background-color: #007bff;
			color: white;
			font-size: 18px;
		}

		::v-deep(.custom-dialog .el-dialog__body) {
			padding: 20px;
		}

		.v-modal {
			z-index: 9 !important;
		}

		// .el-dialog__wrapper {
		// 	z-index: 10 !important;
		// }

		.uni-modal {
			z-index: 3000 !important;
		}
	}

	::v-deep(.el-dialog) {
		z-index: 10 !important;
	}
</style>